<script lang="ts" setup>
import { ref, h, reactive, onMounted,onBeforeMount } from "vue";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { VxeFormProps, VxeButton,VxeSwitch,VxeImage } from "vxe-pc-ui";
import  { templateList, editStatusMerchant, listMerchantName,taxSourcesList } from '@/api/project/project';
const reVxeGridRef = ref();
import { useRouter } from "vue-router";
import listdetailModal from './components/listdetailModal.vue'
import templateModal from './components/templateModal.vue'
import listModal from './components/listModal.vue'
const router = useRouter();
import { Plus } from '@element-plus/icons-vue'
import { exportFile } from '@/api/export';
import { baseUrlApi } from "@/api/utils";
import { ElMessage } from "element-plus";
import { getDay } from "@/utils/date"; //获取日期
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"))
let merchantsInfoId = Number(sessionStorage.getItem("merchantsInfoId"))
onBeforeMount(()=>{
  // let today = getDay(0);
  // let mouthFitst = getDay(-30);
  // formOptions.data.timeRang = [mouthFitst, today];
  // formOptions.data.createTimeStart = mouthFitst;
  // formOptions.data.createTimeEnd = today;
})
onMounted(() => {
  // getalllist();
  // getmerchant();
});
// // 税源地
// const allList = ref<any[]>()
// const getalllist = ()=>{
//   taxSourcesList({merchantsInfoId: formOptions.data.merchantsInfoId}).then(res=>{
//     allList.value = res?.data?.rows;
//   })
// }
// 商户列表
// const merchantList = ref<any[]>()
// const getmerchant = ()=>{
//   listMerchantName().then(res=>{
//     merchantList.value = res?.data?.rows;
//   })
// }

const columns: VxeGridPropTypes.Columns<any> = [
  // { type: "checkbox", title: "", width: 60, align: "center" },
  {
    title: "模板ID",
    field: "templateNumber",
    align: "center",
    minWidth: 70,
    showOverflow: true
  },
  // {
  //   title: "商户名称",
  //   field: "merchantsName",
  //   align: "center",
  //   minWidth: 100
  // },
  
  {
    title: "项目名称",
    field: "projectName",
    align: "center",
    minWidth: 70
  },
  {
    title: "项目内容",
    field: "projectContent",
    align: "center",
    minWidth: 100
  },
  {
    title: "费用规则",
    field: "projectSettlementRules",
    align: "center",
  },
  {
    title: "审核状态",
    field: "auditStateDisplay",
    align: "center",
    minWidth: 100
  },
  {
    title: "模板状态",
    field: "merchantsDealStateDisplay",
    align: "center",
    minWidth: 100
  },
  {
    title: "操作",
    field: "operate",
    align: "center",
    fixed: `right`,
    minWidth: 150,
    slots: {
      default: ({ row }) => {
        return [
          h(VxeButton, {
              status: "primary",
              mode: "text",
              size: "mini",
              content: "查看",
              onClick() {
                templateModalRef.value.showViewModal(row);
              }
        }),
          // h(VxeButton, {
          //     status: "primary",
          //     mode: "text",
          //     size: "mini",
          //     content: "任务管理",
          //     onClick() {
          //       router.push({
          //         path: '/project/list-detail',
          //         query: {
          //           merchantsInfoId: row.id
          //         }
          //       })
          //     }
          //   }),
            // h(VxeButton, {
            //   status: "primary",
            //   mode: "text",
            //   size: "mini",
            //   content: "撤回",
            //   async onClick() {
            //     const type = await VxeUI.modal.confirm("确认是否撤回项目！");
            //     if (type == "confirm") {
            //       editStatusMerchant({
            //       id: row.id,
            //       auditState: row.auditState
            //       }).then((res) => {
            //         if(res){
            //         ElMessage.success(res.msg);
            //         handleSearch();
            //       }
            //       });
            //     }
               
            //   }
            // })
            // ,h(VxeButton, {
            //   status: "primary",
            //   mode: "text",
            //   size: "mini",
            //   content: "导出结算单",
            //   onClick() {
            //     toexport(row.id)
            //   }
            // })
          ]
      }
    }
  }
];
const toexport = (id) => {
  // exportFile
  exportFile(baseUrlApi(`business/project_task/listProjectTaskExport/${id}`))
}
// 筛选相关
const formRef = ref();
interface FormDataVO {
  taxSourcesId: number | string; // 税源地
  taskNumber: string;//项目ID
  projectName: string;//项目名称
  createTimeStart: number | string; //开始日期
  createTimeEnd: number | string; //结束日期
  timeRang: string[]; //日期数组
  merchantsInfoId: number | string; //商户id
  auditState: number | string; // 项目状态
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    taskNumber: '',
    projectName: '',    
    taxSourcesId: taxSourcesId,
    createTimeStart: "",
    createTimeEnd: "",
    timeRang: [],
    merchantsInfoId: merchantsInfoId,
    auditState: ''
  },
  items: [
    {
      field: "projectName",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "projectName" }
    },
    {
      field: "auditState",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "auditState" }
    },
    { align: "left", span: 4, slots: { default: "active" } }
  ]
});
//项目状态
const stateOptions = ref<any[]>([
  {
  value: 0,
  label: '待审核'
},
{
  value:1,
  label: '已通过'
},
{
  value:2,
  label: '已驳回'
}
])
// 重置内容
const handleInitialFormParams = () => {
  formOptions.data = <FormDataVO>{
    projectName: '',
    taxSourcesId: taxSourcesId,
    merchantsInfoId: merchantsInfoId,
    auditState: ''
  };
};
const handleSearch = () => {
  
  reVxeGridRef.value.loadData();
};
const handleReset = async () => {
  await handleInitialFormParams();
  reVxeGridRef.value.loadData("reset");
};
const templateModalRef = ref();
const listModalRef = ref();

const handleAdd = () => {
  templateModalRef.value.showAddModal();
};
const handleEdit = (record: Recordable) => {
  templateModalRef.value.showEditModal(record);
};

const handleDelete = async (record: Recordable) => {
  const type = await VxeUI.modal.confirm("您确定要删除吗？");
  if (type == "confirm") {
    // deleteData(record.id).then(() => {
    //   handleSearch();
    // });
  }
};

const handleView = (record: Recordable) => {
  templateModalRef.value.showViewModal(record);
};
const functions: Record<string, string> = {
  add: "platform.client.index.add",
  edit: "platform.client.index.edit",
  view: "platform.client.index.view",
  delete: "platform.client.index.delete"
};
</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form ref="formRef" v-bind="formOptions">        
        <template #projectName="{ data }">
          <el-input
            clearable
            placeholder="请输入项目名称"
            v-model="data.projectName"
          ></el-input>
        </template>
        <template #auditState="{ data }">
          <el-select
            clearable
            placeholder="请选择项目模板状态"
            v-model="data.auditState"
          >
            <el-option
              v-for="(item, index) in stateOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>        
        <template #active>
          <el-button @click="handleSearch" native-type="submit" type="primary"
          >查询</el-button
          >
          <el-button @click="handleReset" native-type="reset">重置</el-button>
        </template>
      </vxe-form>
      <div class="mt-3">
        <el-button @click="handleAdd"  type="primary" ><el-icon><Plus /></el-icon>创建模板</el-button>
      </div>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="templateList"
        :functions="functions"
        :searchParams="formOptions.data"
        :columns="columns"
        :action="false"
        @handleAdd="handleAdd"
        @handleView="handleView"
        @handleDelete="handleDelete"
      />
    </el-card>
    <templateModal ref="templateModalRef" @reload="handleSearch"></templateModal>
    <listModal  ref="listModalRef" @reload="handleSearch"></listModal>
  </div>
</template>
<style>
.form_header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.left-title {
  font-weight: 700;
  font-family: 微软雅黑;
  font-size: 14px;
  width: 85px;
  text-align: right;
}
.right-text {
  font-size: 14px;
}



.avatar-uploader .el-upload {
  border: 1px dashed #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #eee;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
}
.e_footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
}
</style>
